<template>
    <div class="login-container">
        <a-row type="flex" justify="center" align="middle" style="min-height: 100vh">
            <a-col :xs="20" :sm="12" :md="8" :lg="6">
                <a-card style="border-radius: 8px">
                    <!-- 添加自定义标题插槽 -->
                    <template #title>
                        <div class="title-container">
                            <img src="@/assets/logo.png" class="title-image" alt="logo" />
                            <span style="font-family: PingFang SC;font-size: 25px;font-weight: 400;">zhiheng.lu</span>
                        </div>
                    </template>
                    <a-form :model="formState" name="basic" autocomplete="off" @finish="handleFinish"
                        @finishFailed="handleFinishFailed">
                        <a-form-item label="" name="userName" :rules="[{ required: true, message: '请输入用户名!' }]">
                            <a-input v-model:value="formState.userName" placeholder="用户名">
                                <template #prefix>
                                    <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                                </template>
                            </a-input>
                        </a-form-item>

                        <a-form-item label="" name="password" :rules="[{ required: true, message: '请输入密码!' }]">
                            <a-input-password v-model:value="formState.password" placeholder="密码">
                                <template #prefix>
                                    <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                                </template>
                            </a-input-password>
                        </a-form-item>

                        <a-form-item name="remember">
                            <a-checkbox v-model:checked="formState.remember">{{ $t('common.rememberMe') }}</a-checkbox>
                        </a-form-item>

                        <a-form-item>
                            <a-button class="loginBtn" type="primary" html-type="submit" block :loading="loading">
                                {{ $t('common.login') }}
                            </a-button>
                        </a-form-item>
                    </a-form>
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import { login } from '@/api/user';
import { useUserStore } from '@/store/user/index.js';
import { collapseStore } from '@/store/collapse';
import { useI18n } from 'vue-i18n';
const router = useRouter();
const loading = ref(false);

const userStore = useUserStore();
const useCollapseStore = collapseStore();

const globalI18n = useI18n();

const formState = reactive({
    userName: '',
    password: '',
    remember: false,
});

// 在组件挂载时检查本地存储
onMounted(() => {
    const storedUsername = localStorage.getItem('userName');
    const storedPassword = localStorage.getItem('password');
    const storedRemember = localStorage.getItem('remember') === 'true';

    if (storedRemember && storedUsername && storedPassword) {
        formState.userName = storedUsername;
        formState.password = storedPassword;
        formState.remember = true;
    }
});

const handleFinish = async () => {
    loading.value = true;
    login(formState).then(res => {
        if (res.code === 200) {
            message.success('登录成功!');
            let data = res.data;
            userStore.login(formState.userName, data.token)
            localStorage.setItem('token', data.token);
            localStorage.setItem('nickName', data.userInfo.nickName);
            localStorage.setItem('avatar', data.userInfo.avatar);
            if (formState.remember) {
                localStorage.setItem('userName', formState.userName);
                localStorage.setItem('password', formState.password);
                localStorage.setItem('remember', 'true');
            } else {
                localStorage.removeItem('userName');
                localStorage.removeItem('password');
                localStorage.removeItem('remember');
            }
            useCollapseStore.setCollapseIsTrue();
            router.push('/dashboard')
            loading.value = false;
        }
    }).finally(() => { loading.value = false; })
};

const handleFinishFailed = (errors) => {
    console.log('提交失败:', errors);
};
</script>

<style scoped lang="scss">
.login-container {
    background: #f0f2f5;
    min-height: 100vh;

}

.ant-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ant-form-item {
    margin-bottom: 24px;
}

.ant-btn-block {
    height: 40px;
}

/* 修改复选框悬停样式 */
.ant-checkbox-wrapper:hover .ant-checkbox-inner {
    border-color: #4ab44a;
    /* 悬停时边框颜色 */
}

.ant-checkbox-wrapper:hover .ant-checkbox+span {
    color: #4ab44a;
    /* 悬停时文字颜色 */
}

.ant-checkbox-inner:hover {
    color: #4ab44a;
    /* 悬停时文字颜色 */
}

.loginBtn {
    background-color: #4ab44a;
}

.loginBtn:hover {
    background-color: #0c910c;
}

.title-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;

    .title-image {
        width: 50px;
        margin-right: 10px;
    }
}
</style>